<!-- 组织 -->
<template>
  <main class="page-main">
    <div class="padding-20">
      <!-- 查询、新增 -->
      <div class="margin-top-10 text-right">
        <!-- 操作按钮 -->
        <a-button type="primary" @click="handleAddMode">
          <template #icon>
            <PlusOutlined/>
          </template>
          添加
        </a-button>
        <a-button type="dashed" @click="handleExport" class="margin-left-20">
          <template #icon>
            <DownloadOutlined/>
          </template>
          导出
        </a-button>
      </div>
      <div class="margin-top-20 margin-bottom-20 line"></div>

      <!-- 表格 -->
      <div class="margin-top-10">
        <a-table
            bordered
            :columns="columns" :data-source="tree"
                 class="ant-table-striped"
                 :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        >
          <template #bodyCell="{ column, record  }">
            <template v-if="column.key === 'actionColumn'">
              <a-flex class="width" justify="space-around">
                <a-tooltip title="修改" v-if="authUtil.permit('editAuthUser')">
                  <a-button type="text" size="small" class="button-edit" @click="handleEditMode(record.id)">
                    <template #icon>
                      <FormOutlined/>
                    </template>
                    修改
                  </a-button>
                </a-tooltip>
                <a-tooltip title="删除" v-if="authUtil.permit('deleteAuthUser')">
                  <a-button type="text" size="small" class="button-delete" @click="handleDeleteMode(record.id)">
                    <template #icon>
                      <DeleteOutlined/>
                    </template>
                    删除
                  </a-button>
                </a-tooltip>
              </a-flex>
            </template>
          </template>
        </a-table>
      </div>

    </div>

    <!-- 新增、编辑的表单 -->
    <a-drawer v-model:open="mode.edit" :title="currentId ? '修改组织' : '添加组织'" size="large">
      <Form :dataId="currentId" @close="handleCancel" @successed="handleGetTree" :key="new Date().getTime()"/>
    </a-drawer>

    <!-- 删除 -->
    <a-modal v-model:open="mode.delete" title="确定删除">
      <span>确定删除组织吗？删除后数据不可恢复</span>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" danger @click="handleDelete">删除</a-button>
      </template>
    </a-modal>
  </main>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue';
import {notification} from 'ant-design-vue';
import * as apiUtil from '@/api/ApiUtils';
import * as api from '@/api/AuthOrganizationApi';
import {Organization, QueryData} from "@/api/AuthOrganizationApi"
import Form from './form.vue';
import {
  DownloadOutlined,
  PlusOutlined,
  FormOutlined,
  DeleteOutlined, ExclamationCircleOutlined, HistoryOutlined,
} from '@ant-design/icons-vue';
import * as authUtil from "@/ts/AuthUtils";

// 数据列表
const dataList = ref<any[]>([]);
// 当前操作的数据Id
const currentId = ref<number | null>(null);
// 查询数据
const queryData = reactive(new QueryData());
// 模式
const mode = reactive({
  // 编辑模式
  edit: false,
  // 删除模式
  delete: false,
});
// 树形结构数据
const tree = ref<Organization[]>([]);

const columns = [
  {title: "名称", dataIndex: "name", key: "name",align:"center"},
  {title: "创建人", dataIndex: "createName", key: "createName",align:"center"},
  {title: "创建时间", dataIndex: "createTime", key: "createTime",align:"center"},

  {title: "操作", dataIndex: "actionColumn", key: "actionColumn",align:"center"},
]

/**
 * 删除数据
 */
const handleDelete = () => {
  api.deleteById(currentId.value!).then((res) => {
    if (apiUtil.isSuccessed(res)) {
      notification.success({
        message: '删除成功',
        description: '已删除',
      });
      mode.delete = false;
      handleGetTree();
    } else {
      notification.error({
        message: '删除失败',
        description: res.message,
      });
    }
  });
};

/**
 * 进入新增模式
 */
const handleAddMode = () => {
  currentId.value = null;
  mode.edit = true;
};

/**
 * 进入编辑模式
 * @param id 要编辑的数据ID
 */
const handleEditMode = (id: number) => {
  currentId.value = id;
  mode.edit = true;
};

/**
 * 进入删除模式
 * @param id 要删除的数据ID
 */
const handleDeleteMode = (id: number) => {
  currentId.value = id;
  mode.delete = true;
};

/**
 * 取消编辑/删除操作
 */
const handleCancel = () => {
  mode.edit = false;
  mode.delete = false;
  currentId.value = null;
};

/**
 * 导出数据
 */
const handleExport = () => {
  api.exportList(queryData);
};

/**
 * 获取树形结构数据
 */
const handleGetTree = () => {
  api.getTree().then((res) => {
    if (apiUtil.isSuccessed(res)) {
      tree.value = res.data;
    }
  });
};

// 组件挂载时自动获取树形结构数据
onMounted(() => {
  handleGetTree();
});
</script>

<style scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #f5f5f5;
}
</style>